<template>
  <div class="dashboard-editor-container">
    <!-- 顶部面板组 - 展示核心审批数据 -->
<!--    <panel-group-->
<!--      @handleSetLineChartData="handleSetLineChartData"-->
<!--      :approval-stats="approvalStats"-->
<!--    />-->
    <!-- 最近审批列表 -->
    <el-row style="background:#fff;padding:16px;margin-bottom:32px;">
      <el-col :span="24">
        <h3 style="margin-bottom:16px;">最近审批申请</h3>
        <el-table :data="recentApprovals" border>
          <el-table-column prop="id" label="编号" width="100"></el-table-column>
          <el-table-column prop="type" label="类型">
            <template #default="scope">
              <el-tag :type="getTypeTag(scope.row.type)">{{ scope.row.type }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="applicant" label="申请人"></el-table-column>
          <el-table-column prop="dept" label="部门"></el-table-column>
          <el-table-column prop="time" label="申请时间"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag :type="getStatusTag(scope.row.status)">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default>
              <el-button type="text" size="small">处理</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 审批趋势折线图 -->
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <!-- 审批数据图表区域 -->
    <el-row :gutter="32">
      <!-- 审批类型占比雷达图 -->
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart :chart-data="raddarData" />
        </div>
      </el-col>

      <!-- 部门审批分布饼图 -->
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart :chart-data="pieData" />
        </div>
      </el-col>

      <!-- 审批效率柱状图 -->
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart :chart-data="barData" />
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'

// 审批趋势数据（适配LineChart）
const approvalTrendData = {
  // 请假申请趋势
  leave: {
    expectedData: [15, 20, 18, 25, 22, 30, 28], // 预期
    actualData: [12, 18, 22, 20, 25, 27, 32]    // 实际
  },
  // 补卡申请趋势
  card: {
    expectedData: [5, 8, 6, 10, 7, 9, 8],
    actualData: [6, 7, 9, 8, 11, 7, 10]
  },
  // 报销申请趋势
  expense: {
    expectedData: [20, 25, 30, 28, 35, 40, 38],
    actualData: [18, 22, 32, 30, 33, 37, 42]
  },
  // 加班申请趋势
  overtime: {
    expectedData: [10, 15, 12, 18, 16, 20, 18],
    actualData: [12, 14, 15, 16, 19, 17, 21]
  }
}

export default {
  name: 'ApprovalDashboard',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      // 折线图默认展示请假申请数据
      lineChartData: approvalTrendData.leave,

      // 核心审批统计数据（传给PanelGroup）
      approvalStats: {
        pending: 18,       // 待处理审批
        completed: 145,    // 已完成审批
        rejected: 23,      // 已拒绝审批
        avgTime: '3.5h'    // 平均处理时长
      },

      // 雷达图数据（审批类型占比）
      raddarData: {
        indicator: [
          {name: '请假申请', max: 100},
          {name: '补卡申请', max: 100},
          {name: '报销申请', max: 100},
          {name: '加班申请', max: 100}
        ],
        data: [
          {
            value: [35, 15, 30, 20],
            name: '本月占比(%)'
          }
        ]
      },

      // 饼图数据（部门审批分布）
      pieData: {
        legend: ['技术部', '市场部', '销售部', '行政部', '财务部'],
        series: [
          {
            name: '审批数量',
            data: [45, 30, 55, 25, 38]
          }
        ]
      },

      // 柱状图数据（审批效率对比）
      barData: {
        xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        series: [
          {
            name: '平均处理时长(h)',
            data: [4.2, 3.8, 5.1, 3.5, 4.0, 2.1, 1.5]
          }
        ]
      },

      // 最近审批列表数据
      recentApprovals: [
        {
          id: 'AP202510201',
          type: '请假申请',
          applicant: '张三',
          dept: '技术部',
          time: '2025-10-20 09:15',
          status: '待审批'
        },
        {
          id: 'AP202510202',
          type: '报销申请',
          applicant: '李四',
          dept: '销售部',
          time: '2025-10-20 08:42',
          status: '待审批'
        },
        {
          id: 'AP202510195',
          type: '加班申请',
          applicant: '王五',
          dept: '市场部',
          time: '2025-10-19 17:30',
          status: '已批准'
        },
        {
          id: 'AP202510193',
          type: '补卡申请',
          applicant: '赵六',
          dept: '行政部',
          time: '2025-10-19 15:20',
          status: '已拒绝'
        },
        {
          id: 'AP202510191',
          type: '请假申请',
          applicant: '钱七',
          dept: '财务部',
          time: '2025-10-19 10:10',
          status: '已批准'
        }
      ]
    }
  },
  methods: {
    // 切换折线图数据（与PanelGroup联动）
    handleSetLineChartData(type) {
      const typeMap = {
        '请假申请': 'leave',
        '补卡申请': 'card',
        '报销申请': 'expense',
        '加班申请': 'overtime'
      }
      this.lineChartData = approvalTrendData[typeMap[type]] || approvalTrendData.leave
    },

    // 根据审批类型获取标签样式
    getTypeTag(type) {
      const tagMap = {
        '请假申请': 'primary',
        '补卡申请': 'info',
        '报销申请': 'success',
        '加班申请': 'warning'
      }
      return tagMap[type] || 'default'
    },

    // 根据审批状态获取标签样式
    getStatusTag(status) {
      const tagMap = {
        '待审批': 'warning',
        '已批准': 'success',
        '已拒绝': 'danger',
        '处理中': 'info'
      }
      return tagMap[status] || 'default'
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .dashboard-editor-container {
    padding: 16px;
  }

  .chart-wrapper {
    padding: 8px;
  }
}
</style>
